<template>
	<view class="bgf mt20 ml30 mr30 r16 p30">
		<textarea class="textarea" placeholder="请输入您要反馈的内容" cols="30" rows="10" v-model="form.content"></textarea>
	</view>
	
	<view class="bgf mt20 ml30 mr30 r16 p30">
		<view class="t-flex between mb30">
			<view class="f30 c3 bold">上传图片</view>
			<view class="f24 c3">
				{{form.images.length}}/4
			</view>
		</view>
		
		<imgSelect v-model="form.images" :max="4" />
		
	</view>
	
	<view class="Allbottom t-flex center safeArea">
		<needLogin @onClick="submit">
			<view class="btn t-flex center cf f30" @click="submit">提交</view>
		</needLogin>
	</view>
</template>

<script setup lang="ts">
import imgSelect from "../../components/forms/imgSelect.vue"
import { reactive, ref } from 'vue';
import { routeFn, showToast } from "../../lib/ts/util";
import { suggest } from "../../api";
	
	
	let form = reactive({
		content:'',
		images:[],
	})
	
	const submit = async ()=>{
		if(!form.content) return showToast('请输入反馈内容')
		let res = await suggest({
			content:form.content,
			images:form.images.join(",")
		})
		routeFn.back(res.msg)
	}
	
	

</script>

<style scoped lang="scss">
	.r16{
		border-radius: 16rpx;
	}
	.textarea{
		width: 100%;
	}
	
	.input{
		width: 100%;
		height: 92rpx;
		background: #F6F6F6;
		border-radius: 8rpx;
		padding-left: 36rpx;
		box-sizing: border-box;
	}
	
	
	
</style>
